import React from 'react';
import ReactDom from 'react-dom';

import uuid from 'uuid';

import LiPanel from './LiPanel';

class LrPanel extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            leftList : this.props.leftList,
            rightList : this.props.rightList
        };
    }

    select(type,id){
        var list = [];
        if(type==="left"){
            list = this.state.leftList;
        }else if(type="right"){
            list = this.state.rightList;
        }
        for(let i=0; i<list.length; i++){
            let item = list[i];
            if(item.id===id){
                item.selected = !item.selected;
            }
        }
        if(type==="left"){
            this.state.leftList = list;
        }else if(type="right"){
            this.state.rightList = list;
        }
        this.forceUpdate();
    }
    move(type){

        let tempArr = [];
        if(type==='toLeft'){
            let list = this.state.rightList;
            tempArr = this.getSelectArr(list);
            this.state.rightList = this.removeItems(this.state.rightList);
            this.state.leftList = this.state.leftList.concat(tempArr.map(item=>{item.selected=!item.selected; return item;}));
        }else if(type==='toRight'){
            let list = this.state.leftList;
            tempArr = this.getSelectArr(list);
            this.state.leftList = this.removeItems(this.state.leftList);
            this.state.rightList = this.state.rightList.concat(tempArr.map(item=>{item.selected=!item.selected; return item;}));
        }
        this.forceUpdate();

    }

    getSelectArr(list){
        let tempArr = [];
        for(let i=0; i<list.length; i++){
            let item = list[i];
            if(item.selected){
                tempArr.push(item);
            }
        }
        return tempArr;
    }

    removeItems(list){
        var newArr = [];
        for(let i=0; i<list.length; i++){
            let item = list[i];
            if(!item.selected){
                newArr.push(item);
            }
        }
        return newArr;
    }

    render(){
        return <div className={'box'}>
            <div className={'boxLeft'}>
                <LiPanel list={this.state.leftList} onSelect={(id)=>this.select('left',id)}></LiPanel>
            </div>
            <div className={'boxOp'}>
                <p><button type="button" onClick={()=>this.move('toRight')}> =&nbsp;&gt; </button></p>
                <p><button type="button" onClick={()=>this.move('toLeft')}> &lt;&nbsp;= </button></p>
            </div>
            <div className="boxRight">
                <LiPanel list={this.state.rightList} onSelect={(id)=>this.select('right',id)}></LiPanel>
            </div>
            <div style={{clear:"both"}}></div>
        </div>;
    }
}


let list = [
    {id:uuid(),name:'aaaaa'},
    {id:uuid(),name:'bbbbb'},
    {id:uuid(),name:'ccccc'},
    {id:uuid(),name:'ddddd'}
];

ReactDom.render(<LrPanel leftList={list} rightList={[]}/>, document.querySelector('#app'));
